<template>
    <div class="feedback">
      <div class="title">
        <div class="back-wrapper"><back></back></div>
        意见反馈
      </div>
      <div class="content">
        <div class="form-block-item">
          <div class="left">联系方式</div>
          <div class="right"><input type="text" class="ipt" placeholder="请输入手机号、QQ或邮箱" v-model="contact"></div>
        </div>
        <div class="msg-wrapper">
          <textarea class="msg" placeholder="有什么意见或建议，请在这里告诉我们..." v-model="msg"></textarea>
        </div>
        <div class="btn-wrapper">
          <button class="smt" :class="{able:able}" @click="_submitFeedback">{{btnText}}</button>
        </div>
      </div>
    </div>
</template>

<script>
    import back from '../../../components/back/back'
    import {getStorage} from "../../../common/js/localStorage";
    import {isPhoneNum,isMail,isQQ} from "../../../common/js/filter";
    import {Toast} from 'mint-ui'
    import global from '../../../common/js/global'
    export default {
        name: "feedback",
        data(){
          return{
            able:false,
            btnText:'提交（不可用状态）',
            contact:'',
            msg:''
          }
        },
        methods:{
          _submitFeedback(){
            if(!isPhoneNum(this.contact)&&!isQQ(this.contact)&&!isMail(this.contact)){
              Toast('联系方式格式错误')
              return
            }
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo').JSESSIONID
                },
                url:global.$host+'/member/feedback/save',
                data:{
                  contactInfo:this.contact,
                  content:this.msg
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  Toast('提交成功')
                }else {
                  Toast(res.errorMsg)
                }
              }else {
                Toast('服务器错误，错误代码:'+res.status)
              }
            })
          }
        },
        components:{
          'back':back
        },
        watch:{
          'msg'(){
            if(this.msg.length&&this.contact.length){
              this.btnText = '提交'
              this.able = true
            }else {
              this.btnText = '提交（不可用状态）'
              this.able = false
            }
          },
          'contact'(){
            if(this.msg.length&&this.contact.length){
              this.btnText = '提交'
              this.able = true
            }else {
              this.btnText = '提交（不可用状态）'
              this.able = false
            }
          }
        }
    }
</script>

<style scoped lang="stylus">
  .feedback
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    .title
      position relative
      padding-top 10px
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      padding-top 26px
      .form-block-item
         padding 0 15px
         display flex
         height:52px
         background #171718
         .left
            text-align left
            flex 0 0 95px
            font-size 16px
            color #ffffff
            line-height 52px
         .right
            flex 1
            .ipt
              line-height 52px
              background none
              border none
              outline none
              width 100%
              height 100%
              color #ffffff

      .msg-wrapper
        margin-top 10px
        height 139px
        padding 18px 15px
        background #171718
        .msg
          height 100%
          width 100%
          font-size 14px
          line-height 20px
          resize none
          background none
          color #ffffff
          border none
          outline none
      .btn-wrapper
        padding 22px 15px 0 15px
        .smt
          height 50px
          width 100%
          border none
          background rgba(136,136,136,.4)
          font-size 16px
          color #666666
          outline none
          border-radius 4px
          transition background  0.3s
          &.able
            background #F7C20F
            color #161719
            transition background  0.3s
            &:active
              background #ebb90e
</style>
